<template>
  <div>
    <h2>夏从政是呆子</h2>

    <!-- <button v-on:事件名="xxxx">按钮</button> -->
    <p>{{ age }}</p>
    <p v-text="v"></p>

    <!-- 事件绑定用法一: 事件处理程序,如果只是简单地语句 可以直接写到属性值中 -->
    <!-- 注意事项:   事件处理只能使用vue相关的代码  比如 console.log 不行 -->
    <button v-on:click="age++">摁一下夏从政</button><br />
    <!-- v-on  可以简化成@ -->
    <button @click="v = '他变成猪'">再摁一下夏从政</button><br>

    <!-- ------------------------------------------------------------------------------------ -->
    <!-- 事件绑定方法二 -->
    <button @click="changeAge">再再摁一下夏从政</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://www.itcbc.com:3006/formdata/123.jpg",
      v: "hello Xia",
      age: 21,
    };
  },
  methods: {
    方法1() {},
    方法2() {},
    changeAge() {
      this.age--
    },
    changeXia(){
      
    }
  },
};
</script>

<style >
h2 {
  color: skyblue;
}
</style>